<script setup lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue'
import { ellipse, square, triangle } from 'ionicons/icons'
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" @click="router.push('/Home/FindActivity')">
          <ion-icon aria-hidden="true" :icon="triangle" />
          <ion-label>发现活动</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab2" href="/Home/MyActivities">
          <ion-icon aria-hidden="true" :icon="ellipse" />
          <ion-label>我的活动</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab3" href="/Home/UserCenter">
          <ion-icon aria-hidden="true" :icon="square" />
          <ion-label>个人中心</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>
